<div fxFlexFill class="power" (mouseleave)="leavePower()">
    <div class="pos" [ngClass]="{pos:true,hov:powerShow}"></div>
    <div class="plan-power" fxLayout="column" fxFlexFill (mouseenter)="enterPower()">
        <div class="plan-power-title" [ngStyle]="{color:plantColor}">
            {{ plantTitel }}
            <span class="unit">（{{plantUnit}}）</span>
        </div>

        <div class="plan-power-progress">
            <div class="progress-bg" fxLayout="row" [ngStyle]="{background:plantColor}">
            </div>
            <div class="progress-complete" [ngStyle]="{background:plantColor,width:plantData?.totalCompletiones+'%'}"></div>
            <span class="content">{{plantData?.totalCompletePower * ratio | number:'1.2-2'}}
                <span *ngIf="plantData?.totalPlantPower"> /{{plantData?.totalPlantPower*ratio| number:'1.2-2'}}</span>
            </span>
            <span class="percentage" *ngIf="plantData?.totalPlantPower">{{plantData?.totalCompletiones| number:'1.2-2'}}%</span>
        </div>

    </div>

    <div *ngIf="powerShow" class="power-details" [ngClass]='{winfarm:isOnlyHaveWinfarm,photovoltaic:!isOnlyHaveWinfarm}' [@fadeIn]="powerShow"
        #details>
        <div class="power-show-bg" [@fadeIn]="powerShow">
            <div class="plan-power-echarts" echarts [options]="option"></div>
        </div>
    </div>
</div>